<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <form method="get">
        <!--
            文本框 input type="text"
            属性：
                maxlength:最大可输入的长度
                placeholder:提示文本
                value:输入的值
        -->
        用户名：<input type="text" value="123" name="username"  placeholder="please input"> <br>
        <!-- 
            密码框：type="password"
            属性：
                maxlength:最大可输入的长度
                placeholder:提示文本
        -->
        密码：<input type="password" name="pwd" value=""/> <br>

        <!-- 
            单选框：input type="radio" [同一组的radio必须设置相同的name]
            默认选中：checked = checked
            在html中，如果属性和属性值一样，可以简写 ，比如 checked
        -->
        性别：<input type="radio" value="男"  name="sex">男<input type="radio" value="女"  checked name="sex">女 <br>


         <!-- 
            复选框：input type="checkbox" [同一组的radio必须设置相同的name]  可以多选
            默认选中：checked = checked
        -->
        爱好：<input type="checkbox" name="hobby" value ="跳舞">dance
        <input type="checkbox" name="hobby" checked = checked value ="打篮球"> basketball
        <input type="checkbox" name="hobby" checked = checked value ="踢足球"> football
        <input type="checkbox" name="hobby" checked = checked value ="打乒乓球"> pingpang <br>


        <!-- 
            下拉列表 select 。
            必须配合option标签使用。
                value==>输出给服务端
                option内部的文本给用户看的文本。
        -->
        城市：
            <select name="" id="">
                <option value="苏A">南京</option>
                <option value="苏B">苏州</option>
                <option value="苏H">淮安</option>
                <option value="苏D">常州</option>
            </select> <br>

        <!-- 
            隐藏域：客户看不见 ，但是服务器需要的数据
        -->
        <input type="hidden" name="identifier" value = "320122195631341231">

        <!-- 文件域 -->
        <input type="file"> <br>


        <!-- 多行文本域 -->
        个人简介：
        <textarea name="info" rows="8" cols="50"></textarea> <br>


        <!-- 
            普通的按钮默认是没有功能的
        -->
        <input type="button" value="普通按钮">
        <!-- 
            重置按钮，将表单恢复默认值
        -->
        <input type="reset" value = "重置按钮">
        <!-- 
            提交按钮就是将表单的数据提交到服务器
        -->
        <input type="submit" value = "提交"> <br>
        <hr>
        <button type="button">普通按钮</button>

        <button type="reset">重置按钮</button>
        
        <button type="submit">提交按钮</button>
        
     </form>
</body>
</html>